<template>
  <div>
    <!-- 忘记密码 -->
    <div>
      <div style="text-align: center">
        <h3 style="margin: 10px 0">忘记密码</h3>
        <div
          style="
            font-size: 12px;
            color: #777;
            text-align: left;
            margin-left: 1rem;
          "
        >
          <p style="margin: 10px 0">
            为了您的账号安全,修改密码前请先进行安全验证
          </p>
        </div>
      </div>
      <van-field
        v-model="form.phone"
        name="手机号"
        label="手机号"
        placeholder="请输入手机号"
        @input="errMsg.phone = ''"
      >
        <template #button>
          <van-button
            v-show="cutdown == false"
            size="small"
            round
            :hairline="true"
            style="color: #777"
            @click="getTelCode"
            >获取验证码</van-button
          >
          <!-- 倒计时 -->
          <div
            v-show="cutdown == true"
            style="
              width: 3.9375rem;
              height: 2rem;
              display: flex;
              justify-content: center;
              align-items: center;
            "
          >
            <van-count-down :time="time" format="sss" @finish="timeOut" />
          </div>
        </template>
      </van-field>
      <div
        style="font-size: 12px; color: red; margin-left: 114.8px; height: 1rem"
      >
        <p style="margin: 0">{{ errMsg.phone }}</p>
      </div>
      <van-field
        v-model="form.upwd"
        type="password"
        name="密码"
        label="密码"
        placeholder="密码"
        @input="errMsg.upwd = ''"
      />
      <div
        style="font-size: 12px; color: red; margin-left: 114.8px; height: 1rem"
      >
        <p style="margin: 0">{{ errMsg.upwd }}</p>
      </div>
      <van-field
        v-model="form.telCode"
        name="验证码"
        label="验证码"
        placeholder="验证码"
        @input="errMsg.telCode = ''"
      >
        <template #button>
          <van-button
            size="small"
            round
            type="danger"
            native-type="submit"
            @click="changePwd"
            >&nbsp;&nbsp;&nbsp;确认&nbsp;&nbsp;&nbsp;</van-button
          >
        </template>
      </van-field>
      <div
        style="font-size: 12px; color: red; margin-left: 114.8px; height: 1rem"
      >
        <p style="margin: 0">{{ errMsg.telCode }}</p>
      </div>
      <div class="doReg">
        <van-button
          plain
          hairline
          round
          size="small"
          color="#777"
          @click="toLogin"
          >&nbsp;&nbsp;&nbsp;返回登录&nbsp;&nbsp;&nbsp;</van-button
        >
      </div>
    </div>
  </div>
</template>

<script>
import Identify from "./js/Identify";
export default {
  data() {
    return {
      form: {
        phone: "",
        upwd: "",
        telCode: "",
      },
      errMsg: {
        phone: "",
        upwd: "",
        telCode: "",
      },
      // 倒计时
      cutdown: false,
      time: 0,
    };
  },
  methods: {
    toLogin() {
      this.$eventBus.$emit("toLogin", { msg: "前往登录页面" });
    },
    // 获取验证码
    getTelCode() {
      this.errMsg.phone = Identify.checkPhone(this.form.phone);
      if (this.errMsg.phone == "") {
        let url = "/v1/changepwd/mobile";
        let params = { phone: this.form.phone };
        this.$get(url, params).then((res) => {
          if (res.data.code == 0) {
            this.errMsg.phone = res.data.msg;
          } else {
            this.showCutdown();
          }
        });
      }
    },
    //修改密码
    changePwd() {
      this.errMsg.phone = Identify.checkPhone(this.form.phone);
      this.errMsg.upwd = Identify.checkPwd(this.form.upwd);
      this.errMsg.telCode = Identify.checkTelCode(this.form.telCode);
      if(this.errMsg.phone==''&&this.errMsg.upwd==''&&this.errMsg.telCode==''){
        let url = '/v1/changepwd'
        let params = {
          phone:this.form.phone,
          upwd:this.form.upwd,
          telCode:this.form.telCode
        }
        this.$post(url,params).then(res=>{
          if(res.data.code==0){
            this.errMsg.telCode = res.data.msg;
          }else{
            this.$eventBus.$emit("toLogin", { msg: "前往登录页面" });
            this.$toast('修改密码成功')
          }
        })
      }
    },
    // 倒计时结束
    timeOut() {
      this.cutdown = false;
      this.time = 0;
    },
    // 显示倒计时
    showCutdown() {
      this.cutdown = true;
      this.time = 60 * 1000;
    },
  },
};
</script>

<style lang="scss" scoped>
</style>